<template>
  <a-skeleton avatar :paragraph="{ rows: 8 }"/>
  <a-skeleton avatar :paragraph="{ rows: 8 }"/>
<!--  <div style="background-color: #eeeeee;padding:40px;">-->
<!--    <div class="my-button my-button-blue">我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--    <div class="my-button my-button-red">我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--    <div class="my-button my-button-green">我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--    <div class="my-button my-button-yellow">我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--  </div>-->
<!--  <div style="background-color: #eeeeee;padding:40px;padding-top:0px;">-->
<!--    <div class="my-button my-button-blue my-button-blue" :class="{'my-button-pressed':pressed}" @click="handleClick">-->
<!--      我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--    <div class="my-button my-button-red my-button-blue" :class="{'my-button-pressed':pressed}" @click="handleClick">我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--    <div class="my-button my-button-green my-button-blue" :class="{'my-button-pressed':pressed}" @click="handleClick">-->
<!--      我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--    <div class="my-button my-button-yellow my-button-blue" :class="{'my-button-pressed':pressed}" @click="handleClick">-->
<!--      我是按钮-->
<!--      <div class="my-button-blink"></div>-->
<!--    </div>-->
<!--  </div>-->
</template>
<script setup>
import {onActivated, h, ref} from "vue";

const pressed = ref(false)

onActivated(() => {
  console.log('activated')
})

function handleClick() {
  pressed.value = !pressed.value;

}
</script>
<style lang="scss" scoped>
.my-button {
  display: inline-block;
  width: 100px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
  color: #1890ff;
  border-radius: 18px;
  margin-bottom: 10px;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 2px 1px 5px #7a7a7a, 2px 2px 5px #a2a2a2,
  inset -1px -1px 1px #fff, inset -1px -1px 1px #fff;

  .my-button-blink {
    position: absolute;
    top: 0;
    width: 100%;
    left: -70%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: skewX(-25deg);
  }

  &.my-button-pressed {
    box-shadow: inset 4px 2px 5px #7a7a7a, inset -1px -1px 1px #ffffff;
    border: 1px #bdbdbd solid;

    .my-button-blink {
      left: -80%;
    }
  }
}

.my-button-blue {
  color: #1890ff;
  text-shadow: 0 0 1px #1890ff;
  border: 0px solid #000;
  //border-radius: 10% 10% 10% 10% / 47% 43% 53% 50%;
  background-color: rgba(99, 174, 243, 0.5);
}

.my-button-red {
  color: #d74949;
  text-shadow: 0 0 1px #ff9c9c;
  border: 0px solid #000;
  //border-radius: 10% 10% 10% 10% / 47% 43% 53% 50%;
  background-color: rgba(255, 156, 156, 0.5);
}

.my-button-green {
  color: #48a939;
  text-shadow: 0 0 1px #9cffa1;
  border: 0px solid #000;
  //border-radius: 10% 10% 10% 10% / 47% 43% 53% 50%;
  background-color: rgba(102, 243, 102, 0.5);
}

.my-button-yellow {
  color: #a9a039;
  text-shadow: 0 0 1px #fae250;
  border: 0px solid #000;
  //border-radius: 10% 10% 10% 10% / 47% 43% 53% 50%;
  background-color: rgba(229, 223, 69, 0.5);
}
</style>
